<template>
	<view class="rna-container">
    <t-header @back="clickNavBackFn">实名认证</t-header>
		<!-- content -->
		<view class="rna-content">
			<tui-form ref="authRef" style="display: none;"></tui-form>
			<!-- 身份证信息 -->
			<view class="rna-id-card-info">
				<template v-if="is_audit_v==1">
					<view class="rna-status">
						<img src="/static/images/rzcg.png" alt="" />
					</view>
				</template>
				<template v-else-if="is_audit_v==2">
					<view class="rna-status">
						<img src="/static/images/rzsb.png" alt="" />
					</view>
				</template>
				<view class="title">身份证信息</view>
				<tui-input
					v-model="formData.name"
					padding="28rpx 0"
					:lineLeft="false"
					:size="32"
					:labelSize="32"
					placeholder="请输入"
					label="姓名"
					:labelWidth="200"
					class="input-tt"
				/>
				<tui-input
					v-model="formData.id_card"
					padding="28rpx 0"
					:lineLeft="false"
					:size="32"
					:labelSize="32"
					placeholder="请输入"
					label="证件号码"
					:labelWidth="200"
					class="input-tt"
				/>
				<view class="to-mtm">* 请您使用有效身份证信息认证</view>
			</view>
			<!-- 证件图片 -->
			<view v-if="!(is_audit_v==1 && is_auth_or_v==1)" class="rna-id-photo">
				<view class="title">证件图片</view>
				<view class="upload">
					<view class="u-left">
						<view class="con">
							<view class="cu">
								<tui-upload
									serverUrl=""
									:value="imageList1"
									:forbidAdd="forbidAdd"
									:forbidDel="forbidDel"
									@complete="onUploadTap"
									:params="1"
									:limit="1"
									:width="202"
									:height="122"
									placeholderImg="/static/images/rna-img3.png"
								/>
							</view>
						</view>
						<view class="text">身份证人面像</view>
					</view>
					<view class="u-right">
						<view class="con">
							<view class="cu">
								<tui-upload
									serverUrl=""
									:value="imageList2"
									:forbidAdd="forbidAdd"
									:forbidDel="forbidDel"
									@complete="onUploadTap"
									:params="1"
									:limit="1"
									:width="202"
									:height="122"
									placeholderImg="/static/images/rna-img4.png"
								/>
							</view>
						</view>
						<view class="text">身份证国徽像</view>
					</view>
				</view>
			</view>
			<!-- 驳回原因 -->
			<view class="bhyy padding-bottom" v-if="is_audit_v==2">驳回原因：{{reject}}</view>
			<!-- 立即认证按钮 -->
			<!-- <template v-if="is_audit_v == 0">
				<button
					:loading="submiting"
					:disabled="submiting"
					@click="clickSubmitFn"
					class="rna-immediately-auth-btn"
				>立即认证</button>
			</template>
			<template v-else-if="is_audit_v == 1">
				<button
					@click="clickSubmitFn"
					class="rna-immediately-auth-btn"
				>重新认证</button>
			</template>
			<template v-else-if="is_audit_v == 2">
				<button
					@click="clickSubmitFn"
					class="rna-immediately-auth-btn"
				>重新提交</button>
			</template>
			<template v-else-if="is_audit_v == 3">
				<button
					disabled
					@click="clickSubmitFn"
					class="rna-immediately-auth-btn"
				>审核中</button>
			</template> -->
			<button class="rna-immediately-auth-btn" preventClick :loading="submiting" :disabled="submiting" v-if="is_audit_v==0" @click="submit">立即认证</button>
			<button class="rna-immediately-auth-btn" preventClick v-else-if="is_audit_v==1" @click="submit" disabled>审核通过</button>
			<button class="rna-immediately-auth-btn" preventClick v-else-if="is_audit_v==2" @click="submit" :disabled="formData.id_card==''">重新提交</button>
			<button class="rna-immediately-auth-btn" preventClick v-else-if="is_audit_v==3" @click="submit" disabled>审核中</button>
			
			<view class="padding pagev">
					<u-parse  :content="content"></u-parse>
			</view>
		</view>
	</view>
</template>

<script setup>
import {ref} from 'vue';
import {onLoad} from '@dcloudio/uni-app';
import http from '@/utils/http.js';
import AliOss from "@/utils/aliOssSts.js";

import uParse from '@/components/uni/uParse/src/wxParse.vue'
import THeader from '@/components/views/t-header/index.vue'; // 头部组件

// api
import {updataAuth, authInfo, getAliSts} from '@/api/user.js';

const sysConfig = ref(null);

onLoad(() => {
	if (uni.getStorageSync('sysConfig')) {
		sysConfig.value = uni.getStorageSync('sysConfig');
	}
	getInfoFn();
});

// 点击返回
const clickNavBackFn = () => {
	const pages = getCurrentPages();
	if (pages.length >= 2) {
		uni.navigateBack();
	} else {
		uni.switchTab({
			url: '/pages/my/index'
		});
	}
};

const authRef = ref(null);

const imgList = []

const formData = ref({name:'', id_card:''});
const content = ref('');
const imageList1 = ref([]);
const imageList2 = ref([]);
const authId = ref('');
const is_audit_v = ref(0);
const is_auth_or_v = ref(0);
const forbidDel = ref(false);
const forbidAdd = ref(false);
const reject_v = ref('');
const show = ref(false);
const status = ref(2);
const submiting = ref(false);

const getInfoFn = () => {
	authInfo().then(res=>{
		if(res.code){
			if(res.data.detail){
				content.value = res.data.detail.auth_contact;
				let {name,id_card,frontcardimage,backcardimage,id,is_audit,reject,is_auth_or} = res.data.detail;
				formData.value.name = name
				formData.value.id_card = id_card;
				imageList1.value = frontcardimage==''?[]:[frontcardimage];
				imageList2.value = backcardimage==''?[]:[backcardimage];
				if(is_audit == 1 && is_auth_or == 1){
					formData.value.name = "***"
					formData.value.id_card = "******************";
					imageList1.value = [];
					imageList2.value = [];
				}
				authId.value = id;
				is_audit_v.value = is_audit;
				is_auth_or_v.value = is_auth_or;
				if(is_audit_v.value == 1){
					forbidDel.value = true
					forbidAdd.value = true
				}
				reject_v.value = reject
			}
		}else{
				content.value = res.data.detail.auth_contact
		}
	})
	
	getSTS()
};

const aliSTS = ref({});

const getSTS = () => {
	http.post('/user/getAlicloudSTS').then(res=>{
		if(res.code == 1){
			let sts = res.data
			aliSTS.value = sts
		}
	})
};

const onUploadTap = (e) => {
	console.log(e.imgArr[0]);
	show.value = true
	AliOss.upload(e.imgArr[0], {
		savePath: "image",
		AccessKeySecret: aliSTS.value.AccessKeySecret,
		SecurityToken: aliSTS.value.SecurityToken,
		AccessKeyId: aliSTS.value.AccessKeyId,
		bucket: aliSTS.value.bucket,
		area: aliSTS.value.RegionId,
	}, function (res) {
		if (res) {
			console.log(res);
			show.value = false
			status.value = true
			e.imgArr[0] = res
			[`img${e.params}`].value = e.imgArr
		} else {
			uni.showToast({
				title:"图片上传失败，请稍后重试",
				icon:"none"
			})
		}
	});
};

const submit = () => {
	if(sysConfig.value.isauth_rz==1){
		if(status.value !=1){
			uni.showToast({
				icon: 'none',
				title: '重新上传照片'
			});
			return;
		}
	}
	
	let idFront = imageList1.value.join(',');
	let idBack = imageList2.value.join(',');
	
	let rules = [
		{name:'name',rule:['required'],msg:['请输入姓名']},
		// {name:'id_card',rule:['required','isIdCard'],msg:['请输入证件号','请输入正确的证件号']},
		{name:'id_card',rule:['required'],msg:['请输入证件号']},
		{name:'f',rule:['required'],msg:['请上传证件正面']},
		{name:'b',rule:['required'],msg:['请上传证件反面']},
	]
	let rules1 = [
		{name:'name',rule:['required'],msg:['请输入姓名']},
		// {name:'id_card',rule:['required','isIdCard'],msg:['请输入证件号','请输入正确的证件号']}
		{name:'id_card',rule:['required'],msg:['请输入证件号']},
	]
	let postData = {...formData.value}
	// postData.f= idFront.split("/")[5];
	// postData.b= idBack.split("/")[5];
	postData.f = idFront
	postData.b = idBack
	postData.jiami = 1
	// postData.date = idBack.split("/")[4];
	// postData.frontcardimage= "bd38303d77a7853c91efba5e2c1b7826";
	// postData.backcardimage= "bd38303d77a7853c91efba5e2c1b7826";
	console.log(postData)
	// return
	if(authId.value){
		postData.id = authId.value
	}
	let checkRes ;
	submiting.value = true
	if(sysConfig.value.isauth_rz==1){
		authRef.value.validate(postData,rules).then(ress=>{
			updataAuth(postData).then(res=>{
				if(res.code==1){
					uni.showModal({
						content: res.msg,
						success() {
							uni.navigateBack()
						}
					})
					// this.tui.modal(null,res.msg,false,()=>{
					// 	uni.navigateBack()
					// })
				}else{
					submiting.value = false
					uni.showToast({
						icon: 'none',
						title: res.msg
					})
				}
			})
		}).catch(errors=>{
			submiting.value = false
			uni.showToast({
				icon: 'none',
				title: errors.errorMsg
			})
		})
	}else{
		authRef.value.validate(postData,rules1).then(ress=>{
			updataAuth(postData).then(res=>{
				if(res.code==1){
					uni.showModal({
						content: res.msg,
						success() {
							uni.navigateBack()
						}
					})
					// this.tui.modal(null,res.msg,false,()=>{
					// 	uni.navigateBack()
					// })
				}else{
					this.submiting = false
					this.tui.toast(res.msg)
				}
			})
		}).catch(errors=>{
			submiting.value = false
			uni.showToast({
				icon: 'none',
				title: errors.errorMsg
			})
		})
	}
};
</script>

<style lang='scss' scoped>
.rna-container {
	display: flex;
	flex-direction: column;
	width: 100vw;
	height: 100vh;
	background: #F5F5F5;
	box-sizing: border-box;

	.rna-content {
		flex: 1;
		display: flex;
		flex-direction: column;
		padding: 0 18rpx 26rpx;
		
		.rna-id-card-info, .rna-id-photo {
			width: 100%;
			padding: 30rpx 52rpx;
			border-radius: 34rpx;
			background: #FFFFFF;
			box-sizing: border-box;
			
			.title {
				color: #212121;
				font-size: 40rpx;
				font-weight: 500;
				font-family: PingFangSC, PingFang SC;
			}
		}
		
		.rna-id-card-info {
			position: relative;
			height: 420rpx;
			margin-bottom: 36rpx;
			
			.rna-status {
				position: absolute;
				top: 40rpx;
				right: 20rpx;
				width: 224rpx;
				height: 172rpx;
				border: 1px dashed #CCCCCC;
				z-index: 10;
			}
			
			.title {
				padding-bottom: 28rpx;
				border-bottom: 1px solid #E2E2E2;
			}
			
			::v-deep(.input-tt) {
				.tui-input__wrap::after {
					border-bottom: 1px solid #E2E2E2 !important; 
				}
			}
			
			.to-mtm {
				margin-top: 16rpx;
				color: #8F8F8F;
				font-size: 28rpx;
				font-weight: 400;
				font-family: PingFangSC, PingFang SC;
			}
		}
		
		.rna-id-photo {
			display: flex;
			flex-direction: column;
			height:506rpx;
			margin-bottom: 74rpx;
			
			.title {
				padding-bottom: 36rpx;
			}
			
			.upload {
				flex: 1;
				display: flex;
				justify-content: space-between;
				align-items: center;
				
				.u-left, .u-right {
					width: 274rpx;
					height: 100%;
					
					.con {
						width: 100%;
						height: 274rpx;
						margin-bottom: 18rpx;
						padding: 68rpx 36rpx 84rpx;
						border-radius: 12rpx;
						background: #F5F5F5;
						
						.cu {
							width: 100%;
							height: 100%;
							border: 1px dashed #ccc;
							box-sizing: border-box;
						}
					}
					
					.text {
						color: #373737;
						font-size: 32rpx;
						font-weight: 400;
						font-family: PingFangSC, PingFang SC;
						text-align: center;
					}
				}
			}
		}
		
		.rna-immediately-auth-btn {
			display: flex;
			justify-content: center;
			align-items: center;
			width: calc(100% - 44rpx);
			height: 94rpx;
			border-radius: 62rpx;
			background: linear-gradient( 178deg, #FF7E3E 0%, #F62645 100%);
			color: #FFFFFF;
			font-size: 32rpx;
			font-weight: 400;
			font-family: PingFangSC, PingFang SC;
		}
	}
}

.bhyy {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	padding-left: 44rpx;
	padding-right: 44rpx;
	color: #EF6544;
	font-size: 28rpx;
}
</style>
